<template>
  <div id="app" class="page-container">
    <h2 style="margin-top: 0px">Register</h2>

    <img src="../public/images/login.jpg" class="image-container" />

    <div class="formcontainer">
      <el-form label-width="70px" :model="form1">
        <el-form-item label="用户名">
          <el-input v-model="form1.username"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form1.email"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            type="password"
            v-model="form1.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户权限">
        <el-select v-model="form1.role" multiple>
          <el-option label="user" value="user"></el-option>
          <el-option label="mod" value="mod" disabled></el-option>
          <el-option label="admin" value="admin" disabled></el-option>
        </el-select>
      </el-form-item>
        <!-- <el-form-item label="确认密码" prop="form1.checkPass">
          <el-input
            type="password"
            v-model="form1.checkPass"
            autocomplete="off"
          ></el-input>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <!-- <el-button @click="resetForm('form1')">重置</el-button> -->
          <el-button type="success" @click="toLogin">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
    
    
    <script>
export default {
  name: "Register",
  data() {
    //   var validatePass = (rule, value, callback) => {
    //     if (value === "") {
    //       callback(new Error("请输入密码"));
    //     } else {
    //       if (this.form1.checkPass !== "") {
    //         this.$refs.form1.validateField("checkPass");
    //       }
    //       callback();
    //     }
    //   };
    //   var validatePass2 = (rule, value, callback) => {
    //     if (value === "") {
    //       callback(new Error("请再次输入密码"));
    //     } else if (value !== this.form1.pass) {
    //       callback(new Error("两次输入密码不一致!"));
    //     } else {
    //       callback();
    //     }
    //   };
    return {
      form1: {
        username: "",
        email: "",
        password: "",
        role: []
      },
      // rules: {
      //   password: [{ validator: validatePass, trigger: "blur" }],

      // },
    };
  },
  methods: {
    submitForm() {
      {
        this.$axios
          .post("http://localhost:8080/api/auth/signup", this.form1)
          .then(() => {
            console.log("success!");
            this.$router.push({ path: "/" });
          })
          .catch((error) => console.log(error));
      }
    },
    //   resetForm(form1) {
    //     this.$refs[form1].resetFields();
    //   },
    toLogin() {
      this.$router.push({ path: "/" });
    },
  },
};
</script>
    

    <style>
.page-container {
  /* margin: 120px auto 0 auto; */
  position: center;
  width: 100%;
  height: 730px;

  border-color: #ccc;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0px;
  padding: 0px;
  background-size: 100% 100%;
  background-color: #c8c7c5;
}
.image-container {
  float: left;
  height: 550px;
  width: 900px;
  margin-bottom: 10px;
  border-width: 1px;
  border-radius: 30px;
}
.formcontainer {
  height: 300px;
  width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  float: right;
  padding-right: 80px;
  margin-top: 100px;
  margin-right: 80px;
  background-color: #d8c7b5;
  border-width: 1px;
  border-radius: 30px;
}
form {
  position: center;
  width: 305px;
  margin: 15px auto 0 auto;
  text-align: center;
}
.connect {
  text-align: center;
  width: 305px;
  margin: 35px auto 0 auto;
  font-size: 18px;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  margin-top: 50px;
}
h1 {
  text-align: center;
}
.loginBtn {
  width: 230px;
  text-align: center;
}
.registerBtn {
  width: 230px;
  text-align: center;
}
</style>